<template>
  <div class="about">
    <HeaderView />
    <SidebarView />
    <div class="content-box" :class="{ 'content-collapse': collapse }">
      <TagsView />
      <div class="content">
        <!-- 路由过渡动效 -->
        <RouterView v-slot="{ Component }">
          <transition name="move" mode="out-in">
            <keep-alive :include="tagsList">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </RouterView>
      </div>
    </div>
  </div>
</template>

<script setup>
import HeaderView from "../components/HeaderView.vue";
import SidebarView from "../components/SideBarView.vue";
import TagsView from "../components/TagsView.vue";
import { computed } from "vue";
import { RouterView } from 'vue-router'
import { useTagsStore } from "../stores/store.js";

const store = useTagsStore();
const tagsList = [];
const collapse = computed(() => store.collapse);
</script>
